// 头部右侧工具条

.e-header-topbar {
    display: flex;
    align-items: stretch;
    padding: 0 15px 0 0;

    .e-header-topbar-item {
        display: flex;
        align-items: stretch;
        margin: 0;

        .e-header-topbar-wrapper {
            cursor: pointer;
            display: flex;
            align-items: stretch;

            .badge.badge--notify {
                position: absolute;
                top: 14px;
                left: 50%;
                margin-left: -2px;
            }
        }

        .e-header-topbar-icon {
            display: flex;
            align-items: center;
            align-self: center;
            justify-content: center;
            width: e-get($e-header-topbar-config, client, desktop, item-size);
            height: e-get($e-header-topbar-config, client, desktop, item-size);
            cursor: pointer;
            @include e-transition();

            @include e-rounded {
                border-radius: $e-border-radius;
            }

            i {
                @include e-transition();
                font-size: 1.4rem;
                color: #fff;
            }

            svg {
                width: e-get($e-header-topbar-config, client, desktop, svg-size);
                height: e-get($e-header-topbar-config, client, desktop, svg-size);
            }
        }

        // user
        &.e-header-topbar-item--user {
            .e-header-topbar-user {
                padding: 0 8px;
                display: flex;
                align-items: center;
                align-self: center;
                justify-content: center;
                height: e-get($e-header-topbar-config, client, desktop, item-size);
                cursor: pointer;
                @include e-rounded {
                    border-radius: $e-border-radius;
                }

                .e-header-topbar-welcome,
                .e-header-topbar-username {
                    display: flex;
                    align-self: center;
                    padding: 0 .55rem 0 0;
                    font-weight: 500;
                }

                .e-header-topbar-welcome {
                    font-size: .9rem;
                }

                .e-header-topbar-username {
                    font-size: 1rem;
                }

                img {
                    align-self: center;
                    max-height: e-get($e-header-topbar-config, client, desktop, avatar-size);
                    @include e-rounded {
                        border-radius: $e-border-radius;
                    }
                }

                .badge.badge--username {
                    width: e-get($e-header-topbar-config, client, desktop, avatar-size);
                    height: e-get($e-header-topbar-config, client, desktop, avatar-size);
                    @include e-rounded {
                        border-radius: $e-border-radius;
                    }
                }
            }
        }

        &:hover, &.show {
            .e-header-topbar-icon {
                @include e-transition();
                background-color: rgba(#212029, .7);

                i {
                    @include e-transition();
                    color: #fff;
                }
            }

            &.e-header-topbar-item--user {
                .e-header-topbar-user {
                    @include e-transition();
                }
            }
        }
    }
}

// pad & 手机
@include e-tablet-and-mobile {
    .e-header-topbar {
        padding: 0 e-get($e-page-padding, mobile);
        box-shadow: 0 1px 9px -3px rgba(0, 0, 0, .1);
        transition: e-get($e-aside-config, base, minimize, transition);
        margin-top: -(e-get($e-header-topbar-config, client, mobile, height) + $tab-page-height);
        height: e-get($e-header-topbar-config, client, mobile, height);
        position: absolute;
        left: 0;
        right: 0;
        justify-content: flex-end;

        // 移动端固定头部
        .e-header-mobile--fixed & {
            position: fixed;
            z-index: (e-get($e-header-config, client, mobile, fixed, z-index)) - 1;
            margin-top: 0;
            transition: e-get($e-aside-config, base, minimize, transition);
        }

        // 显示
        .e-header-topbar--mobile-on & {
            margin-top: -$tab-page-height;
            transition: all .3s ease;
        }

        .e-header-topbar-item {
            margin: 0 2px;
            padding: 0;

            .e-header-topbar-wrapper {
                display: flex;
                align-items: stretch;

                .badge.badge--notify {
                    top: 6px;
                }
            }

            .e-header-topbar-icon {
                width: e-get($e-header-topbar-config, client, mobile, item-size);
                height: e-get($e-header-topbar-config, client, mobile, item-size);

                i {
                    font-size: 1.3rem;
                }
            }

            &.e-header-topbar-item-user {
                margin-left: 2px;
                margin-right: 0;
                padding: 0;

                .e-header-topbar-user {
                    padding: 0 2px;
                    height: e-get($e-header-topbar-config, client, mobile, item-size);

                    .e-header-topbar-welcome {
                        padding: 0 .35rem 0 0;
                    }

                    img {
                        max-height: e-get($e-header-topbar-config, client, mobile, avatar-size);
                    }

                    .badge.badge--username {
                        width: e-get($e-header-topbar-config, client, mobile, avatar-size);
                        height: e-get($e-header-topbar-config, client, mobile, avatar-size);
                    }
                }
            }
        }
    }
}